<template>
  <div>
    <!-- 发起业务 -->
    <a-card :bordered="false" size="small" title="发起业务">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <!-- 搜索区域 -->
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :span="5">
              <a-form-item label="交易类型" :labelCol="{ span: 2 }" :wrapperCol="{ span: 2 }">
                <a-radio-group v-model="tranType" @change="onChange">
                  <a-radio :value="1"> 批量代收 </a-radio>
                  <a-radio :value="2"> 批量代付 </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="银行" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                <a-select placeholder="请选择银行">
                  <a-select-option value="lucy">lucy</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="7">
              <a-form-item label="户名" :labelCol="{ span: 2, offset: 1 }" :wrapperCol="{ span: 2 }">
                <a-input placeholder="请输入户名"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-button type="primary" @click="query" icon="search">查询</a-button>
              <a-button type="primary" icon="reload">重置</a-button>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="上传文件" :labelCol="{ span: 12 }" :wrapperCol="{ span: 12 }">
                <a-upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  :multiple="false"
                  ref="file"
                  @change="handleChange"
                >
                  <a-button style="margin-left: 0px" icon="upload"> 选择文件 </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :span="3">
              <a-button type="primary">上传文件</a-button>
            </a-col>
            <a-col :span="5">
              <a-range-picker @change="dateChange" />
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <!-- 汇总信息 -->
    <a-card :bordered="false" size="small" title="汇总信息">
      <!-- 汇总表格查询区域 -->
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ sumData.length }}</a
          >项
          <a style="margin-left: 24px">清空</a>
        </div>

        <a-table
          :columns="sumColumns"
          :dataSource="sumData"
          rowKey=""
          :loading="sumLoading"
          :rowSelection="rowSelection"
        >
          <template #footer>提交笔数：{{ sumData.length }} 提交金额：{{ sumData.length }}</template>
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-card>
    <!-- 明细信息 -->
    <a-card :bordered="false" size="small" title="明细信息">
      <!-- 明细表格查询区域 -->
      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ detailData.length }}</a
          >项
          <a style="margin-left: 24px">清空</a>
        </div>

        <a-table
          :columns="detailColumns"
          :data-source="detailData"
          :loading="detailLoading"
          rowKey=""
          :row-selection="rowSelection"
        >
          <template #footer>提交笔数：{{ detailData.length }} 提交金额：{{ detailData.length }}</template>
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import XLSX from 'xlsx'
import { moneyFormat } from '@/utils/util'

export default {
  name: 'BatchCollPay',
  data() {
    return {
      // 交易类型
      tranType: 1,
      // 汇总表格加载标识
      sumLoading: false,
      // 汇总表格数据
      sumData: [],
      // 汇总表头
      sumColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '上次文件名',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '汇总笔数/金额',
          align: 'center',
          dataIndex: 'amount',
          customRender: amount => moneyFormat(amount, 4, '.', ',')
        },
        {
          title: '提交日期',
          align: 'center',
          dataIndex: 'submitDate',
          customRender(value) {
            return value ? moment(value).format('YYYY-MM-DD') : ''
          }
        },
        {
          title: '操作员账号',
          align: 'center',
          dataIndex: 'account'
        },
        {
          title: '提交时间',
          align: 'center',
          dataIndex: 'submitTime',
          customRender(value) {
            return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : ''
          }
        }
      ],
      // 明细表格加载标识
      detailLoading: false,
      // 明细表格数据
      detailData: [],
      // 明细表头
      detailColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '账户',
          align: 'center',
          dataIndex: 'account'
        },
        {
          title: '银行',
          align: 'center',
          dataIndex: 'bank'
        },
        {
          title: '交易金额',
          align: 'center',
          dataIndex: 'amount'
        },
        {
          title: '业务种类',
          align: 'center',
          dataIndex: 'msgType'
        },
        {
          title: '缴费号',
          align: 'center',
          dataIndex: 'paycostNum'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark'
        }
      ]
    }
  },
  computed: {
    // 判断勾选的值
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    // 交易类型单选按钮改变触发
    onChange(e) {
      console.log('radio checked', e.target.value)
    },
    // 上传文件触发
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    // 日期选择框待选日期发生变化触发
    dateChange(date, dateString) {
      console.log(dateString)
    },
    // 点击查询执行
    query() {}
  }
}
</script>
<style scoped lang="less">
@import '../../style/index.less';
/** Button按钮间距 */
.ant-btn {
  margin-left: 8px;
}
</style>
